<template>
  <!-- 主播管理 -->
  <a-spin class="anchor-review" tip="加载中..." :spinning="isLoading">
    <!-- 筛选 -->
    <div class="filter">
      <div class="l">
        <span>申请时间：</span>
        <a-range-picker style="margin-right:15px;" @change="handleByQueryCond" v-model="search.selectDate" />
        <span>状态：</span>
        <a-select style="width:160px;margin-right:15px;" placeholder="请选择状态" v-model="search.status" @change="handleByQueryCond">
          <a-select-option value="">全部</a-select-option>
          <a-select-option v-for="item in cashStatus" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
        </a-select>
        <span>类型：</span>
        <a-select style="width:160px" placeholder="请选择状态" v-model="search.cashType" @change="handleByQueryCond">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="1">佣金提现</a-select-option>
          <a-select-option value="2">坑位费</a-select-option>
          <a-select-option value="3">车马费</a-select-option>
          <a-select-option value="4">其他</a-select-option>
        </a-select>
      </div>

      <div class="r">
        <a-button type="primary" @click="handleByQueryCond" style="background:#1d6fe9">查询</a-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="main-body">
      <a-table :columns="tableColumns" :pagination="false" :data-source="cashList" :scroll="{ x: 900, y: tableHeight }" rowKey="id">
        <!-- 状态 -->
        <!-- 0审核中 1提现中 2提现成功 3提现失败 -->
        <template slot="status" slot-scope="status, record">
          <span :class="[record.status === 3 ? 'color-f55' : null]">
            {{ record.statusDesc }}
            <a-tooltip v-if="record.status === 3">
              <template slot="title">
                {{ record.refuseReason }}
              </template>
              <a-icon type="info-circle" class="color-f55" />
            </a-tooltip>
          </span>
        </template>
        <!-- 个人信息 -->
        <template slot="cashUserName" slot-scope="text, record">
          <p>{{ record.cashUserName || '无' }}：{{ record.phoneNumber || '无' }}</p>
          <p style="margin-bottom:0;">达人ID：{{ record.idSign || '无' }}</p>
        </template>
        <!-- 收款账号 -->
        <template slot="cardNumber" slot-scope="text, record">
          <p>{{ record.accountName || '无' }}</p>
          <p style="margin-bottom:0;">银行卡号：{{ record.cardNumber || '无' }}</p>
        </template>
      </a-table>
    </div>

    <!-- 分页 -->
    <div class="paging-container">
      <a-pagination
        :pageSize="pagination.pageSize"
        v-model="pagination.pageIndex"
        :total="pagination.total"
        showQuickJumper
        showLessItems
        :showTotal="(total) => `共 ${total} 条`"
        style="margin: 10px auto;text-align:right;"
        @change="handlePageChange"
      />
    </div>
  </a-spin>
</template>

<script>
import { settlementCashList } from '@/service'
import upload from '@/components/upload/upload'
import { safeDiv } from '@/util'
import moment from 'moment'
export default {
  name: 'withdraw',
  data() {
    return {
      moment,
      // loading是否显示
      isLoading: false,
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // table数据查询条件
      search: {
        // 1-待审核;2-已通过;3-已驳回
        status: '',
        selectDate: [],
        cashType: undefined
      },
      // 提现列表
      cashList: [],
      // 主播列表总数据条数
      anchorTotal: 0
    }
  },

  components: {
    upload
  },

  computed: {
    // table配置
    tableColumns() {
      return [
        { title: 'ID', width: 100, dataIndex: 'id' },
        { title: '申请时间', width: 200, dataIndex: 'applyTime' },
        { title: '个人信息', width: 260, dataIndex: 'cashUserName', scopedSlots: { customRender: 'cashUserName' } },
        {
          title: '金额',
          width: 150,
          dataIndex: 'money',
          sorter: (a, b) => a.money - b.money,
          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        { title: '收款账号', width: 260, dataIndex: 'cardNumber', scopedSlots: { customRender: 'cardNumber' } },
        { title: '类型', width: 200, dataIndex: 'cashTypeDesc' },
        { title: '申请状态', width: 120, dataIndex: 'status', scopedSlots: { customRender: 'status' } }
      ]
    },

    // 状态
    cashStatus() {
      return [
        {
          name: '审核中',
          value: 0
        },
        {
          name: '提现中',
          value: 1
        },
        {
          name: '提现成功',
          value: 2
        },
        {
          name: '提现失败',
          value: 3
        }
      ]
    }
  },

  methods: {
    /**
     * 通过条件查询
     * @returns {void}
     */
    handleByQueryCond() {
      this.pagination.pageIndex = 1
      this.query()
    },

    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.pagination.pageIndex = num
      this.query()
    },

    // 拿参数
    getParams() {
      const { pageIndex, pageSize } = this.pagination
      const { cashType, status, selectDate } = this.search

      return {
        pageIndex,
        pageSize,
        status,
        cashType,
        startDate: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
        endDate: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
      }
    },
    // 设置搜索
    setSearch() {
      const { pageIndex, cashType, startDate, endDate, status } = this.$route.query
      const queryLen = Object.keys(this.$route.query).length
      if (queryLen) {
        this.search = {
          ...this.search,
          pageIndex: pageIndex ? Number(pageIndex) : 1,
          cashType: cashType || '',
          status: status || '',
          selectDate: startDate && endDate ? [moment(Number(startDate)), moment(Number(endDate))] : []
          //  selectDate: beginTime ? Number(beginTime) : null,
          //  endTime: endTime ? Number(endTime) : null,
        }
      }
    },
    // 初始化
    initQuery() {
      this.pagination.pageIndex = 1
      this.pagination.pageSize = 10
      this.setPath(this.getParams())
      this.query()
    },

    /**
     * 获取主播信息列表
     * 具体参数参考 getAnchorInfoListApi 方法
     * @returns {Promise<void>}
     */
    query() {
      this.isLoading = true
      settlementCashList(this.getParams())
        .then((rs) => {
          this.cashList = Object.freeze(rs.anchorsCashRecordListData) || []
          this.pagination.total = rs.total || 0
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 储存搜索字段
    setPath(origin) {
      const { path } = this.$route
      const query = {}
      for (let key in origin) {
        if (origin[key]) query[key] = origin[key]
      }
      if (query.pageIndex <= 1) delete query.pageIndex
      delete query.pageSize
      this.$router
        .replace({
          path,
          query: {
            ...query
          }
        })
        .catch(() => {})
    }
  },

  mounted() {
    this.setSearch()
    this.query()
  },

  filters: {
    // 获取直播平台
    getPlatform(val) {
      if (!val) return '无'
      return val === 1 ? '抖音' : '快手'
    }
  }
}
</script>

<style lang="less" scoped>
.anchor-review {
  padding: 16px;
}

// 主播信息弹窗
.anchor-info {
  /deep/ .ant-modal-footer {
    border-top: none;
    padding-bottom: 36px;
    text-align: center;
  }

  //  描述列表样式覆盖
  /deep/ .ant-descriptions-view {
    .ant-descriptions-item-label {
      color: #666666;
    }

    .ant-descriptions-item-content {
      color: #333;
      vertical-align: text-top;
    }
  }
}
.color-f55 {
  color: #f55f4e !important;
}
</style>
